<html>

<head>
    <meta charset="utf-8">
    <title>某品牌手机</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/init-animate.css">
    <link rel="stylesheet" type="text/css" href="css/media.css">
</head>

<body>
    <div class="box">
        <header class="header" id="headerCon">
            <a href="#screen-1" class="header__logo">H5实战布局</a>
            <nav class="header__nav" id="navcon">
                <a href="javascript:;" id="home" class="header__nav-item header__nav-item_status_active header__nav-item_i_1">外观</a>
                <a href="javascript:;" id="setting" class="header__nav-item header__nav-item_i_2">配置</a>
                <a href="javascript:;" id="size" class="header__nav-item header__nav-item_i_3">型号</a>
                <a href="javascript:;" id="descr" class="header__nav-item header__nav-item_i_4">说明</a>
                <a href="javascript:;" id="other" class="header__nav-item header__nav-item_i_5">其他产品</a>
                <a href="javascript:;" id="buyBtn" class="header__nav-item header__nav-item_custom_button">立即购买</a>
                <div class="header__nav-item-tip" id="navtip"></div>
            </nav>
        </header>
        <section class="screen-1">
            <div class="screen-1__wrap">
                <div class="screen-1__heading" id="screenOneMain">
                    <b>某XX手机</b> 让你的生活更精彩
                </div>
            </div>
            <div class="screen-1__phone" id="screenOnePhone"></div>
            <div class="screen-1__shadow" id="screenOneShadow"></div>
        </section>

        <section class="screen-2">
        <div class="screen-2__wrap">
            <div class="screen-2__heading" id="srceenTwoMain">优美的设计，更令人着迷</div>
            <div class="screen-2__subheading"  id="srceenTwoSub">
                <p>采用受欢迎的设计，让它更加出色。</p>
                <p>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</p>
            </div>
            <div class="screen-2__phone"  id="srceenTwoPhone">
                <div class="screen-2__point screen-2__point_i_1">高清摄像</div>
                <div class="screen-2__point screen-2__point_i_2">超薄机身</div>
                <div class="screen-2__point screen-2__point_i_3">大屏显示</div>
            <div>
        </div>

        </section>

        <section class="screen-3">
            <div class="screen-3__wrap">
                <div class="screen-3__heading" id="srceenThreeMain">外形小巧，功能强大的手机</div>
                <div class="screen-3__subheading" id="srceenThreeSub">采用受欢迎的设计，让它更加出色。
                    <br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</div>
                <div class="screen-3__phone" id="srceenThreePhone"></div>
                <div class="screen-3__features" id="srceenThreeItems">
                    <div class="screen-3__features-item">
                        <span class="screen-3__features-item-number screen-3__features-item_i_1">
                            5.7
                        </span>英寸大屏
                    </div>
                    <div class="screen-3__features-item">
                        <span class="screen-3__features-item-number screen-3__features-item_i_2">
                            1200
                        </span>万像素
                    </div>
                    <div class="screen-3__features-item">
                        <span class="screen-3__features-item-number screen-3__features-item_i_3">
                            3D
                        </span>touch
                    </div>
                    <div class="screen-3__features-item">
                        <span class="screen-3__features-item-number screen-3__features-item_i_4">
                            A9
                        </span>处理器
                    </div>
                </div>
            </div>
        </section>

        <section class="screen-4">
            <div class="screen-4__wrap">
                <div class="screen-4__heading" id="srceenFourMain">丰富的手机型号</div>
                <div class="screen-4__subheading" id="srceenFourSub">找到适合你的手机</div>
                <div class="screen-4__type" id="srceenFourType">

                    <div class="screen-4__type-item screen-4__type-item_i_1">
                        <div class="screen-4__type-item-name">慕课红</div>
                        <div class="screen-4__type-item-storage">16G/32G/64G</div>
                    </div>

                    <div class="screen-4__type-item screen-4__type-item_i_2">
                        <div class="screen-4__type-item-name">土豪金</div>
                        <div class="screen-4__type-item-storage">16G/32G/64G</div>
                    </div>
                    <div class="screen-4__type-item screen-4__type-item_i_3">
                        <div class="screen-4__type-item-name">太空灰</div>
                        <div class="screen-4__type-item-storage">16G/32G/64G</div>
                    </div>

                    <div class="screen-4__type-item screen-4__type-item_i_4">
                        <div class="screen-4__type-item-name">绅士黑</div>
                        <div class="screen-4__type-item-storage">16G/32G/64G</div>
                    </div>
                </div>
        </section>
        <section class="screen-5">
            <div class="screen-5__wrap">
                <div class="screen-5__heading" id="srceenFiveMain">游戏、学习、拍照、有这一部就够了</div>
                <div class="screen-5__subheading" id="srceenFiveSub">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</div>
            </div>
            <div class="screen-5__back" id="srceenFiveBack"></div>
        </section>
        <section class="buy">
            <a href="#" class="buy__button">立即购买</a>
        </section>

        <footer class="footer">
            © 2017 EvanLian.com ChinaICP备13046642号
        </footer>
        </div>
        <div class="outline" id="sideNavCon">
            <a href="javascript:;" id="" class="outline__item outline__item_i_1">外观</a>
            <a href="javascript:;" id="" class="outline__item outline__item_i_2">配置</a>
            <a href="javascript:;" id="" class="outline__item outline__item_i_3">型号</a>
            <a href="javascript:;" id="" class="outline__item outline__item_i_4">说明</a>
            <a href="javascript:;" id="" class="outline__item outline__item_i_5">其他</a>
        </div>
</body>

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>

</html>